<template>
	<view>
		<view class="page">
		   <comp-common v-bind="{data:data}"></comp-common>
			<comp-header v-bind="{data:data}"></comp-header>
		    <view class="body after-navber flex-col flex-y-center">
		        <view class="flex-row flex-y-center lucky-head" v-if="data.award.status==2||data.award.status==3">
		            <image src="../../static/lottery/lottery-code.png" style="position:absolute;top:0;left:0;width:84upx;height:84upx"></image>
		            <image class="flex-grow-0" :src="data.award.user.avatar_url" style="width:64upx;margin-left:40upx;margin-right:32upx;border-radius:50%;height:64upx"></image>
		            <view class="flex-grow-1 lucky-name">{{award.user.nickname}}</view>
		            <view class="flex-col flex-grow-0 flex-y-center" style="margin-right:40upx">
		                <text>{{data.award.lucky_code}}</text>
		                <text class="fs-sm">获赠幸运码</text>
		            </view>
		        </view>
		        <view style="background:#ffffff;margin-top:40upx;border-radius:16upx;width:702upx;">
		            <view class="flex-x-center flex-y-center" style="height:88upx;border-bottom:1upx solid #e2e2e2">
		                <block v-if="data.award.status==2||data.award.status==3">其他</block>
		                <block v-else>持有</block>{{data.num}}个幸运码
		            </view>
		            <view style="margin-top:32upx">
		                <view class="flex-row flex-y-center lucky-parent-list" v-if="data.own.status==1||data.own.status==0">
		                    <image class="flex-grow-0" :src="own.user.avatar_url"></image>
		                    <view class="flex-grow-1 lucky-name">{{own.user.nickname}}</view>
		                    <view class="flex-col flex-grow-0 flex-y-center" style="margin-right:40upx">
		                        <text>{{data.own.lucky_code}}</text>
		                        <text class="fs-sm">幸运码</text>
		                    </view>
		                </view>
		                <view class="flex-row flex-y-center lucky-parent-list" v-for="(item) in parent" :key="item.id">
		                    <image class="flex-grow-0" :src="item.avatar_url"></image>
		                    <view class="flex-grow-1 lucky-name">{{item.nickname}}</view>
		                    <view class="flex-col flex-grow-0 flex-y-center" style="margin-right:40upx">
		                        <text>{{item.lucky_code}}</text>
		                        <text class="fs-sm">获赠幸运码</text>
		                    </view>
		                </view>
		            </view>
		            <view @click="userload" class="font-minor lucky-parent-list font-minor flex-x-center" v-if="parent.length>=9">加载更多</view>
		        </view>
		    </view>
		    	<comp-footer v-bind="{data:data}"></comp-footer>
		</view>
		
	</view>
</template>

<script>var myVue = {};
	var is_loading = !1;
	
	export default {
		data() {
			return {
				data: {
					page: 1,
					num: 0,
					award:'',
					own:{},
					parent:{}
					
				}
			};
		},
		onLoad: function(a) {myVue = this;
			var n = this;
			if (n.getApp.page.onLoad(this, a), a) {
				n.setData(a), that.getApp.core.showLoading({
					title: "加载中"
				}), n.getApp.request({
					url: n.getApp.api.lottery.lucky_code,
					data: {
						id: a.id
					},
					success: function(a) {
						if (0 == a.code) {
							n.setData(a.data);
							var t = a.data;
							if (t.award && t.award.lucky_code == a.data.own.lucky_code) var e = a.data.parent.length;
							else e = a.data.parent.length + 1;
							n.setData({
								num: e
							});
						}
					},
					complete: function(a) {
						t.getApp.core.hideLoading();
					}
				});
			}
		},
		onShow: function() {
			myVue.getApp.page.onShow(this);
		},
		methods:{
			userload: function() {
					var t = this,e = t.data.page + 1;
				if (!is_loading) {
					is_loading = !0, t.getApp.core.showLoading({
						title: "加载中"
					});	
					t.getApp.request({
						url: t.getApp.api.lottery.lucky_code,
						data: {
							id: t.data.id,
							page: e
						},
						success: function(a) {
							if (0 == a.code) {
								if (null == a.data.parent || 0 == a.data.parent.length) return void(is_loading = !0);
								t.setData({
									parent: t.data.parent.concat(a.data.parent),
									page: e,
									num: t.data.parent.concat(a.data.parent).length
								});
							} else t.showToast({
								title: a.msg
							});
						},
						complete: function() {
							t.getApp.core.hideLoading(), t.data.is_loading = !1;
						}
					});
				}
			}
		}
	}
</script>

<style scoped>
.lucky-head {
    border: 1upx solid #ff4544;
    position: relative;
    background: #ffffff;
    margin-top: 40upx;
    border-radius: 16upx;
    height: 140upx;
    width: 702upx;
}

.lucky-parent-list {
    margin-bottom: 32upx;
}

.lucky-parent-list image {
    display: block;
    width: 64upx;
    height: 64upx;
    margin: 0 32upx 0 40upx;
    border-radius: 50%;
}

.lucky-name {
    color: #353535;
}
</style>
